<template>
  <div>
    <el-drawer
      size="80%"
      direction="ttb"
      :with-header="false"
      :visible.sync="shoppingModifyV"
    >
      <el-form
        ref="shoppingBill"
        :model="shoppingBill"
        label-width="auto"
        size="mini"
        inline
      >
        <el-divider>BILL-SUMMARY</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="supplyCompany" label="采购公司：">
              <el-input v-model="shoppingBill.supplyCompany"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="shoppingBillCode" label="No. ">
              <el-tag size="small" type="success">{{
                shoppingBill.shoppingBillCode
              }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>MATERIAL-DETAIL</el-divider>

        <div>
          <el-button type="primary" size="mini" @click="delDetail"
            >删除</el-button
          >
          <el-button type="primary" size="mini" @click="addDetail"
            >添加</el-button
          >
        </div>
        <el-table
          ref="shoppingBillItems"
          :data="shoppingBill.shoppingBillItems"
          max-height="320px"
          border
          show-summary
          :summary-method="summaryMethod"
          @selection-change="(rows) => (selected = rows)"
        >
          <el-table-column
            type="index"
            align="center"
            label="--"
          ></el-table-column>
          <el-table-column type="selection" align="center"></el-table-column>

          <el-table-column align="left" width="256" label="品名">
            <template #default="{ row }">
              <el-link type="success" icon="el-icon-s-goods">{{
                row.goodsCode
              }}</el-link>
            </template>
          </el-table-column>

          <el-table-column align="center" label="品名" prop="goodsName">
          </el-table-column>
          <el-table-column sortable width="150" prop="goodsPrice" label="单价">
            <template #default="{ row }">
              <!-- <el-form-item :prop="'shoppingBillItems.' + that.$index + '.quantity'"/>-->
              <el-form-item>
                <el-input-number
                  :precision="0"
                  type="number"
                  size="mini"
                  v-model="row.goodsPrice"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column sortable width="150" prop="quantity" label="数量">
            <template #default="{ row }">
              <!-- <el-form-item :prop="'shoppingBillItems.' + that.$index + '.quantity'"/>-->
              <el-form-item>
                <el-input-number
                  :precision="0"
                  type="number"
                  size="mini"
                  v-model="row.quantity"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="summary"
            label="小计"
            :formatter="summaryFormatter"
          ></el-table-column>
        </el-table>
        <el-divider>OPERATOR-SIGN</el-divider>
        <el-descriptions border size="small">
          <el-descriptions-item label="申请人">
            <el-tag>{{
              ($store.state.userInfo && $store.state.userInfo.username) ||
              "匿名用户"
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="审核人"></el-descriptions-item>
        </el-descriptions>

        <div>
          <el-button type="warning" icon="el-icon-remove" @click="reset"
            >重置
          </el-button>
          <el-button type="primary" icon="el-icon-edit" @click="submit"
            >提交
          </el-button>
        </div>
      </el-form>
    </el-drawer>
    <shopping-goods-support
      ref="support"
      @post-select="postSelect"
    ></shopping-goods-support>
  </div>
</template>
<script>
import ShoppingGoodsSupport from "@/components/ShoppingGoodsSupport";
import { basic } from "@/api";
/**
 * 页面核心数据结构体说明文档
 *{
  "shoppingBillCode": "SH77610511170854",
  "shoppingBillItems": [
    {
      "shoppingBillFk": "SH77610511170854",
      "itemIndex": 0,
      "goodsCode": "MT002",
      "goodsName": "天平",
      "goodsPrice": 60,
      "quantity": 3
    },
  ],
  "amount": 289.5,
  "updateTime": "2022-05-11T17:08:54.778",
  "abandon": false,
  "supplyCompany": "AllNight",
  "submitter": "anonymousUser",
  "submitTime": null,
  "shoppingState": "toSubmit",
  "auditor": "anonymousUser",
  "auditScore": -1,
  "resubmitTimes": 0
}

 *
 */
// import New from './components/New.vue';
export default {
  name: "ShoppingModify",
  components: {
    ShoppingGoodsSupport,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      shoppingModifyV: false,
      selected: [],
      shoppingBill: {
        supplyCompany: null,

        shoppingBillItems: [],

        shoppingBillCode: null,
        submitter: null,
        auditor: null,
        amount: 0,
        updateTime: null,
        abandon: false,
        submitTime: null,

        shoppingState: "toSubmit",
        auditScore: -1,
        resubmitTimes: 0,
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    appear(id) {
      /*this.$http({
        method: "get",
        url: `http://localhost:9090/swimming/shopping/find/${id}`,
      })*/
      basic.findById(id).then(
        (res) => {
          this.shoppingBill = res.data;
          this.$nextTick(() => {
            this.shoppingModifyV = true;
          });
        },
        (error) => {
          console.log(".data request error : " + error.response.status);
        }
      );
    },
    addDetail() {
      this.$refs.support.appear();
    },
    postSelect(supported) {
      let s = supported.map((x) => {
        return {
          shoppingBillFk: null,
          itemIndex: 0,
          goodsCode: x.materialCode,
          goodsName: x.materialLabel,
          goodsPrice: x.suggestPrice,
          quantity: 1,
        };
      });
      this.shoppingBill.shoppingBillItems.push(...s);
      this.shoppingBill.shoppingBillItems.forEach((x, i) => {
        x.itemIndex = i;
      });
    },
    delDetail() {
      let s = [];
      for (let item of this.shoppingBill.shoppingBillItems) {
        let l = false;
        for (let selectedDetail of this.selected) {
          if (item.itemIndex === selectedDetail.itemIndex) {
            l = true;
            break;
          }
        }
        if (!l) {
          s.push(item);
        }
      }
      this.shoppingBill.shoppingBillItems = s;
    },
    summaryFormatter(row) {
      return row.goodsPrice * row.quantity;
    },
    summaryMethod({ columns, data }) {
      //column对象是 el-table-column代表的元信息列 如prop属性property 等
      //columns整体 为 List<column> 纵向
      //data 整体为List<row> 横向
      //理解好 row[column.property]
      const sums = [];
      sums[0] = "总";
      sums[columns.length - 1] = data.reduce((pre, cur) => {
        pre = pre + cur.quantity * cur.goodsPrice;
        return pre;
      }, 0);
      return sums;
    },
    reset() {},
    submit() {
      // this.$http({
      //   method: "put",
      //   url: "http://localhost:9090/swimming/shopping/modify",
      //   data: this.shoppingBill,
      // })
      basic.modify(this.shoppingBill).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.reset();
          this.shoppingModifyV = false;
          this.$emit("post-submit");
        },
        (error) => {
          console.log(error);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-drawer {
  .el-form {
    width: 1200px;
    margin-left: 260px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
